<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">借阅记录</div>
                <div class="layui-card-body">

                    <form class="layui-form" id="myForm" lay-filter="stuform">
                        <div class="layui-form-item">

                            <div class="layui-inline">
                                <label class="layui-form-label">查找条件：</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="name" name="name" class="layui-input"/>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <button type="button" class="layui-btn" lay-submit lay-filter="setmyinfo">
                                    <i class="layui-icon">&#xe615;</i>查询
                                </button>
                                <button type="button" class="layui-btn" lay-submit lay-filter="reset">
                                    <i class="layui-icon">&#xe640;</i>清空
                                </button>
                            </div>
                        </div>
                    </form>

                    <table class="layui-hide" id="user-borrow-table" lay-filter="user-borrow-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/static/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
    var where = {};
    layui.config({
        base: '../static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','jquery','form'], function(){
        var that = this,
            table = layui.table,
            $ = layui.jquery,
            form = layui.form;

        table.render({
            elem: '#user-borrow-table'
            ,url: 'findAllBorrow'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,toolbar: '#toolbarDemo'
            ,defaultToolbar: ['filter', 'exports', 'print']
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title: 'ID', sort: true}
                ,{field:'username', title: '借书人'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'bookName', title: '书名', sort: true}
                ,{field:'applyTime', title:'借书时间', sort: true}
                /*,{field:'borrowTime', title:'同意借书时间'}*/
                ,{field:'giveTime', title:'归还时间'}
                ,{field:'operation', title:'读者评价'}
                ,{field:'status', title:'状态'}
            ]]
            ,page: true
        });

        form.on('submit(setmyinfo)', function (data) {
            var field = data.field;

            table.reload('user-borrow-table',{where: field})
        });
        form.on('submit(reset)', function (data) {
            where = "";
            $("input").val("");
            form.render();
            table.reload('user-borrow-table', {where: ''});
        });
    });
</script>
</body>
</html>